<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <div class="panel-lead">
            <ul class="nav nav-tabs" data-field="status">
                <li class="active"><a href="#one" data-toggle="tab">学员详情</a></li>
            </ul>
        </div>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="row">
                    <!-- 基本信息 -->
                    <div class="col-md-6">
                        <div class="box box-primary">
                            <div class="box-header with-border">
                                <h3 class="box-title">基本信息</h3>
                            </div>
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-md-4 text-center">
                                        <img src="{$row.avatar}" class="img-circle" style="width: 80px; height: 80px;" alt="头像">
                                    </div>
                                    <div class="col-md-8">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td width="80"><strong>ID:</strong></td>
                                                <td>{$row.id}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>用户名:</strong></td>
                                                <td>{$row.username}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>昵称:</strong></td>
                                                <td>{$row.nickname|default='-'}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>手机号:</strong></td>
                                                <td>{$row.mobile|default='-'}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>邮箱:</strong></td>
                                                <td>{$row.email|default='-'}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 账户信息 -->
                    <div class="col-md-6">
                        <div class="box box-info">
                            <div class="box-header with-border">
                                <h3 class="box-title">账户信息</h3>
                            </div>
                            <div class="box-body">
                                <table class="table table-borderless">
                                    <tr>
                                        <td width="100"><strong>用户组:</strong></td>
                                        <td>{$row.group_name}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>状态:</strong></td>
                                        <td>
                                            {if condition="$row.status == 'normal'"}
                                            <span class="label label-success">正常</span>
                                            {else/}
                                            <span class="label label-warning">隐藏</span>
                                            {/if}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>注册时间:</strong></td>
                                        <td>{$row.createtime_text}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>最后登录:</strong></td>
                                        <td>{$row.logintime_text}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>参与班级:</strong></td>
                                        <td><span class="badge">{$row.classes|count}</span> 个班级</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 参与班级列表 -->
                {if condition="$row.classes"}
                <div class="row">
                    <div class="col-md-12">
                        <div class="box box-success">
                            <div class="box-header with-border">
                                <h3 class="box-title">参与班级</h3>
                            </div>
                            <div class="box-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>班级ID</th>
                                                <th>班级名称</th>
                                                <th>教学点</th>
                                                <th>加入时间</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {volist name="row.classes" id="class"}
                                            <tr>
                                                <td>{$class.id}</td>
                                                <td>{$class.class_name}</td>
                                                <td>{$class.ocation_name}</td>
                                                <td>{$class.join_time_text}</td>
                                            </tr>
                                            {/volist}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {else/}
                <div class="row">
                    <div class="col-md-12">
                        <div class="box box-default">
                            <div class="box-header with-border">
                                <h3 class="box-title">参与班级</h3>
                            </div>
                            <div class="box-body">
                                <div class="alert alert-info">
                                    <i class="fa fa-info-circle"></i> 该学员暂未参与任何班级
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/if}

                <!-- 操作按钮 -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <button type="button" class="btn btn-default" onclick="history.back()">
                                <i class="fa fa-arrow-left"></i> 返回列表
                            </button>
                            
                            {if condition="$row.status == 'normal'"}
                            <button type="button" class="btn btn-warning btn-change-status" data-id="{$row.id}" data-status="hidden">
                                <i class="fa fa-eye-slash"></i> 设为隐藏
                            </button>
                            {else/}
                            <button type="button" class="btn btn-success btn-change-status" data-id="{$row.id}" data-status="normal">
                                <i class="fa fa-check"></i> 设为正常
                            </button>
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.table-borderless td {
    border: none !important;
    padding: 8px 0;
}

.box {
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #fff;
}

.box.box-primary {
    border-top-color: #3c8dbc;
}

.box.box-info {
    border-top-color: #00c0ef;
}

.box.box-success {
    border-top-color: #00a65a;
}

.box.box-default {
    border-top-color: #d2d6de;
}

.box-header {
    border-bottom: 1px solid #f4f4f4;
    color: #444;
    display: block;
    padding: 10px 15px;
    position: relative;
}

.box-header.with-border {
    border-bottom: 1px solid #f4f4f4;
}

.box-title {
    font-size: 18px;
    margin: 0;
    line-height: 1;
}

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

.img-circle {
    border-radius: 50%;
}

.badge {
    background-color: #777;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    min-width: 10px;
    padding: 3px 7px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
</style>

<script>
$(document).ready(function() {
    // 状态切换
    $('.btn-change-status').on('click', function() {
        var id = $(this).data('id');
        var status = $(this).data('status');
        var statusText = status === 'normal' ? '正常' : '隐藏';
        
        Layer.confirm('确定要将该学员状态设为' + statusText + '吗？', function(index) {
            $.ajax({
                url: 'user/studentmanager/changeStatus',
                type: 'POST',
                data: {
                    ids: id,
                    status: status
                },
                success: function(data) {
                    if (data.code === 1) {
                        Layer.msg('状态更新成功', {icon: 1});
                        setTimeout(function() {
                            location.reload();
                        }, 1500);
                    } else {
                        Layer.msg(data.msg || '操作失败', {icon: 2});
                    }
                },
                error: function() {
                    Layer.msg('网络错误', {icon: 2});
                }
            });
            Layer.close(index);
        });
    });
});
</script>
